<template>
  <el-dialog
    title="封禁用户"
    :visible="this.isBanDialogActive"
    width="410px"
    :before-close="handleClose"
  >
    <div class="input-wrap">
      <div class="title">用户名</div>
      <el-input
        prefix="用户名"
        :value="this.banDialogData.user.username"
        type="text"
        :disabled="true"
      ></el-input>
    </div>
    <div class="input-wrap">
      <div class="title">封禁时长</div>
      <el-select v-model="duration">
        <el-option
          v-for="item in bandDurationList"
          :key="item.code"
          :label="item.detail"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </div>
    <div class="input-wrap">
      <div class="title">封禁原因</div>
      <el-input
        v-model="reason"
        type="textarea"
        maxlength="30"
        show-word-limit
        resize="none"
        rows="5"
      ></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleBan">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import banApi from "@/axios/banApi";
export default {
  data() {
    return {
      bandDurationList: [],
      duration: 1,
      reason: "",
    };
  },
  methods: {
    handleClose() {
      this.closeBanDialog();
    },
    handleBan() {
      banApi
        .ban({
          uid: this.banDialogData.user.userId,
          duration: this.duration,
          forumId: this.banDialogData.forumId,
          reason: this.reason,
        })
        .then(({ data }) => {
          this.$message.success("封禁成功");
          this.banDialogData.isBanned = true
          this.closeBanDialog();
        });
    },
  },
  created() {
    banApi.getBanDurationList().then(({ data }) => {
      this.bandDurationList = data.data;
    });
  },
};
</script>

<style scoped lang="less">
.input-wrap {
  display: flex;
  margin-bottom: 20px;
}
.title {
  white-space: nowrap;
  line-height: 40px;
  margin-right: 10px;
  width: 70px;
  flex-shrink: 0;
}
</style>